<template>
  <div>
    <h1>欢迎光临_vue开发的收银系统_水果店</h1>
    <table>
      <tr>
        <h2>苹果 10 ￥/斤,折扣&lt;8折&gt;</h2>
      </tr>
      <tr>
        <span>请输入你要购买的斤数 </span>
        <input type="number" v-model="num" />
      </tr>
      <tr>
        <button @click="shopping">结账买单~</button>
      </tr>
      <tr>
        结账单:总价{{
          sum
        }}￥元,折后价:{{
          discount
        }}￥元 省了:{{
          province
        }}￥元
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      sum: 0,
      discount: 0,
      province: 0,
    }
  },
  methods: {
    shopping() {
      this.sum = this.num * 10
      this.discount = this.sum * 0.8
      this.province = this.sum - this.discount
    },
  },
}
</script>

<style>
div {
  text-align: center;
}
table {
  border: 1px black double;
  margin: auto;
  width: 100%;
}
</style>
